@import "../../_variables";
@import "../../_mixin";
@import "variables";

.page_8 {

  .page_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 236rem/@base-size;
    height: 131rem/@base-size;

    .swiper-slide-init& {
      animation: page_title_ani .8s;
      animation-fill-mode: both;
      animation-delay: .1s;
    }
  }

  .title_star_line_1, .title_star_line_2 {
    position: absolute;
    width: 67rem/@base-size;
    height: 61rem/@base-size;
  }

  .title_star_line_1 {
    top: 38rem/@base-size;
    left: 34rem/@base-size;
    opacity: 0;

    .swiper-slide-init& {
      animation: title_star_line_ani 1s linear;
      animation-fill-mode: both;
      animation-delay: .9s;
    }
  }

  .title_star_line_2 {
    top: 142rem/@base-size;
    left: 10rem/@base-size;
    opacity: 0;

    .swiper-slide-init& {
      animation: title_star_line_ani 1s linear;
      animation-fill-mode: both;
      animation-delay: 1.6s;
    }
  }

  .content_main {
    position: absolute;
    top: 260rem/@base-size;
    left: 80rem/@base-size;
    width: 515rem/@base-size;
    height: 443rem/@base-size;
  }

  .content_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .swiper-slide-init& {
      animation: fadeIn .6s;
      animation-fill-mode: both;
      animation-delay: .9s;
    }
  }

  .content_star_line_1 {
    position: absolute;
    width: 110rem/@base-size;
    height: 14rem/@base-size;
    top: -64rem/@base-size;
    left: 298rem/@base-size;

    .swiper-slide-init& {
      animation: hd_star_line_ani 1s linear;
      animation-fill-mode: both;
      animation-delay: 1.5s;
    }
  }

  .content_star_line_3 {
    position: absolute;
    width: 110rem/@base-size;
    height: 14rem/@base-size;
    top: 170rem/@base-size;
    right: -80rem/@base-size;

    .swiper-slide-init& {
      animation: hd_star_line_ani 1s linear;
      animation-fill-mode: both;
      animation-delay: 2s;
    }
  }

  .star_lines {
    position: absolute;
    right: 64rem/@base-size;
    top: -111rem/@base-size;
    width: 89rem/@base-size;
    height: 100rem/@base-size;

    .swiper-slide-init& {
      animation: fadeIn .6s;
      animation-fill-mode: both;
      animation-delay: 0.9s;
    }
  }

  .stripe_rect_box {
    position: absolute;
    left: -30rem/@base-size;
    top: 230rem/@base-size;

    .stripe_rect {
      width: 60rem/@base-size;
      height: 11rem/@base-size;
      background-size: 100% 100%;

      .swiper-slide-init& {
        animation: fadeIn .4s, stripe_rect_ani .5s linear infinite;
        animation-fill-mode: both;
        animation-delay: 1.5s, 1.5s;
      }

      @keyframes stripe_rect_ani {
        from {
          background-position: 0 0;
        }
        to {
          background-position: 12rem/@base-size 0;
        }
      }
    }

    .stripe_rect_2 {
      margin-left: 4rem/@base-size;
    }

    .stripe_rect_3 {
      margin-left: 8rem/@base-size;
    }
  }

  .line_angle {
    position: absolute;
    right: 78rem/@base-size;
    bottom: -95rem/@base-size;
    width: 98rem/@base-size;
    height: 58rem/@base-size;

    .swiper-slide-init& {
      animation: fadeIn .6s;
      animation-fill-mode: both;
      animation-delay: 1.5s;
    }
  }

  .buttons {
    .swiper-slide-init& {
      animation: fadeIn .4s, slideInDown .4s;
      animation-fill-mode: both;
      animation-delay: 2s, 2s;
    }
  }
}
